<template>
  <div class="app-container">
    <!-- 查询区域 -->
    <el-input v-model="queryParams.supplierCode" placeholder="供应商编码" style="width: 150px; margin-right: 10px;" />
    <el-input v-model="queryParams.supplierName" placeholder="供应商名称" style="width: 150px; margin-right: 10px;" />
    <el-button @click="fetchData">查询</el-button>

    <!-- 表格展示 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="supplierCode" label="供应商编码" align="center"></el-table-column>
      <el-table-column prop="supplierName" label="供应商名称" align="center"></el-table-column>

      <!-- 应付金额 -->
      <el-table-column prop="payableAmount" label="应付金额">
        <template #default="{ row }">
          <a href="javascript:void(0);" @click="showPayableDetails(row.supplierCode)" class="highlight-text">
            {{ row.payableAmount ? row.payableAmount.toFixed(2) : '0.00' }}
          </a>
        </template>
      </el-table-column>

      <!-- 已付金额 -->
      <el-table-column prop="paidAmount" label="已付金额">
        <template #default="{ row }">
          <a href="javascript:void(0);" @click="showPaidDetails(row.supplierCode)" class="highlight-text">
            {{ row.paidAmount ? row.paidAmount.toFixed(2) : '0.00' }}
          </a>
        </template>
      </el-table-column>

	  <el-table-column prop="unpaidAmount" label="未付金额" align="center"></el-table-column>

      <!-- 采购金额 -->
      <el-table-column prop="purchaseAmount" label="采购金额">
        <template #default="{ row }">
          <a href="javascript:void(0);" @click="showPurchaseDetails(row.supplierCode)" class="highlight-text">
            {{ row.purchaseAmount ? row.purchaseAmount.toFixed(2) : '0.00' }}
          </a>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handlePageChange"
      style="margin-top: 20px"
    />

    <!-- 弹窗 - 应付明细 -->
    <el-dialog :visible.sync="payableDialogVisible" title="应付明细信息" width="90%" top="5vh">
      <el-tabs v-model="activePayableTab" @tab-click="handlePayableTabClick">
        <el-tab-pane label="采购订单实际入库价格数据流" name="dataStream">
          <el-table :data="payableDataStreamList" border style="width: 100%">
            <el-table-column prop="supplierCode" label="供应商编码" align="center" />
            <el-table-column prop="supplierName" label="供应商名称" align="center" />
            <el-table-column prop="actualPayableAmount" label="实际应付金额" align="right" />
            <el-table-column prop="paymentStatus" label="付款状态" align="center" />
            <el-table-column prop="orderDate" label="订单日期" align="center" />
            <el-table-column prop="orderCode" label="订单编码" align="center" />
            <el-table-column prop="materialCode" label="物料编码" align="center" />
            <el-table-column prop="materialName" label="物料名称" align="center" />
            <el-table-column prop="purchaseUnitPrice" label="采购单价" align="right" />
            <el-table-column prop="inboundQuantity" label="入库数量" align="center" />
            <el-table-column prop="inboundTime" label="入库时间" align="center" />
            <el-table-column prop="remarks" label="备注" align="center" />
          </el-table>
          <div class="summary-line">应付金额汇总：{{ payableDataStreamTotal.toFixed(2) }} 元</div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 弹窗 - 已付明细 -->
    <el-dialog :visible.sync="paidDialogVisible" title="已付明细信息" width="90%" top="5vh">
      <el-tabs v-model="activePaidTab" @tab-click="handlePaidTabClick">
        <el-tab-pane label="付款申请单" name="paymentApply">
          <el-table :data="paymentApplyList" border style="width: 100%">
            <el-table-column prop="supplierCode" label="供应商编码" align="center" />
            <el-table-column prop="supplierName" label="供应商名称" align="center" />
            <el-table-column prop="bxCode" label="付款单编号" align="center" />
            <el-table-column prop="bxFyJe" label="申请付款金额" align="right" />
            <el-table-column prop="bxDate" label="申请日期" align="center" />
            <el-table-column prop="bxFyXm" label="付款类型" align="center" />
            <el-table-column prop="bxFyRemark" label="备注" align="center" />
          </el-table>
          <div class="summary-line">申请付款金额汇总：{{ paymentApplyTotal.toFixed(2) }} 元</div>
        </el-tab-pane>
        <el-tab-pane label="付款单（进口）" name="paymentImport">
          <el-table :data="paymentImportList" border style="width: 100%">
            <el-table-column prop="gysCode" label="供应商编码" align="center" />
            <el-table-column prop="gysName" label="供应商名称" align="center" />
            <el-table-column prop="amountPayable" label="应付金额" align="right" />
            <el-table-column prop="amountPaid" label="已付金额" align="right" />
          </el-table>
          <div class="summary-line">
            应付金额汇总：{{ paymentImportPayableTotal.toFixed(2) }} 元，
            已付金额汇总：{{ paymentImportPaidTotal.toFixed(2) }} 元
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 弹窗 - 采购明细 -->
    <el-dialog :visible.sync="purchaseDialogVisible" title="采购明细信息" width="90%" top="5vh">
      <el-tabs v-model="activePurchaseTab" @tab-click="handlePurchaseTabClick">
        <el-tab-pane label="采购订单实际入库价格数据流" name="dataStream">
          <el-table :data="purchaseDataStreamList" border style="width: 100%">
            <el-table-column prop="supplierCode" label="供应商编码" align="center" />
            <el-table-column prop="supplierName" label="供应商名称" align="center" />
            <el-table-column prop="purchaseRequirementAmt" label="采购需求金额" align="right" />
            <el-table-column prop="paymentStatus" label="付款状态" align="center" />
            <el-table-column prop="orderDate" label="订单日期" align="center" />
            <el-table-column prop="orderCode" label="订单编码" align="center" />
            <el-table-column prop="materialCode" label="物料编码" align="center" />
            <el-table-column prop="materialName" label="物料名称" align="center" />
            <el-table-column prop="purchaseUnitPrice" label="采购单价" align="right" />
            <el-table-column prop="inboundQuantity" label="入库数量" align="center" />
            <el-table-column prop="inboundTime" label="入库时间" align="center" />
            <el-table-column prop="remarks" label="备注" align="center" />
          </el-table>
          <div class="summary-line">采购需求金额汇总：{{ purchaseDataStreamTotal.toFixed(2) }} 元</div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPayableSummary,
  getPayableDataStream,
  getPaymentApply,
  getPaymentImport
} from '@/api/mes/md/payableReport';

export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      queryParams: {
        supplierCode: '',
        supplierName: ''
      },
      currentSupplierCode: '',

      // 弹窗相关
      payableDialogVisible: false,
      paidDialogVisible: false,
      purchaseDialogVisible: false,

      activePayableTab: 'dataStream',
      activePaidTab: 'paymentApply',
      activePurchaseTab: 'dataStream',

      payableDataStreamList: [],
      paymentApplyList: [],
      paymentImportList: [],
      purchaseDataStreamList: [],
       // 汇总金额字段
          payableAmountTotal: 0,
          bxFyJeTotal: 0,
          amountPayableTotal: 0,
          amountPaidTotal: 0,
          purchaseRequirementAmtTotal: 0
    };
  },
  created() {
    this.fetchData();
  },
  computed: {
    payableDataStreamTotal() {
      return (this.payableDataStreamList || []).reduce((sum, item) => sum + (item.actualPayableAmount || 0), 0);
    },
    paymentApplyTotal() {
      return (this.paymentApplyList || []).reduce((sum, item) => sum + (item.bxFyJe || 0), 0);
    },
    paymentImportPayableTotal() {
      return (this.paymentImportList || []).reduce((sum, item) => sum + (item.amountPayable || 0), 0);
    },
    paymentImportPaidTotal() {
      return (this.paymentImportList || []).reduce((sum, item) => sum + (item.amountPaid || 0), 0);
    },
    purchaseDataStreamTotal() {
      return (this.purchaseDataStreamList || []).reduce((sum, item) => sum + (item.purchaseRequirementAmt || 0), 0);
    }
  },
  methods: {
    fetchData() {
      getPayableSummary({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        supplierCode: this.queryParams.supplierCode,
        supplierName: this.queryParams.supplierName
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    handlePageChange(page) {
      this.pageNum = page;
      this.fetchData();
    },

    // 显示应付明细
    showPayableDetails(supplierCode) {
      this.currentSupplierCode = supplierCode;
      this.payableDialogVisible = true;
      this.activePayableTab = 'dataStream';
      this.payableDataStreamList = [];
      this.handlePayableTabClick({ name: 'dataStream' });
    },
    handlePayableTabClick(tab) {
      const code = this.currentSupplierCode;
      if (!code) return;

      switch (tab.name) {
        case 'dataStream':
          if (this.payableDataStreamList.length > 0 && this.currentSupplierCode === code) return;
          getPayableDataStream({ supplierCode: code }).then(res => {
            // 按照 orderDate 倒序排序
            this.payableDataStreamList = (res.data || []).sort((a, b) => {
               return new Date(b.orderDate) - new Date(a.orderDate);
             });
          });
          break;
      }
    },

    // 显示已付明细
    showPaidDetails(supplierCode) {
      this.currentSupplierCode = supplierCode;
      this.paidDialogVisible = true;
      this.activePaidTab = 'paymentApply';
      this.paymentApplyList = [];
      this.paymentImportList = [];
      this.handlePaidTabClick({ name: 'paymentApply' });
    },
    handlePaidTabClick(tab) {
      const code = this.currentSupplierCode;
      if (!code) return;

      switch (tab.name) {
        case 'paymentApply':
          if (this.paymentApplyList.length > 0 && this.currentSupplierCode === code) return;
          getPaymentApply({ supplierCode: code }).then(res => {
            // 按照 bxDate 倒序排序
            this.paymentApplyList = (res.data || []).sort((a, b) => {
               return new Date(b.bxDate) - new Date(a.bxDate);
             });
          });
          break;
        case 'paymentImport':
          if (this.paymentImportList.length > 0 && this.currentSupplierCode === code) return;
          getPaymentImport({ supplierCode: code }).then(res => {
             this.paymentImportList = res.data || [];
          });
          break;
      }
    },

    // 显示采购明细
    showPurchaseDetails(supplierCode) {
      this.currentSupplierCode = supplierCode;
      this.purchaseDialogVisible = true;
      this.activePurchaseTab = 'dataStream';
      this.purchaseDataStreamList = [];
      this.handlePurchaseTabClick({ name: 'dataStream' });
    },
    handlePurchaseTabClick(tab) {
      const code = this.currentSupplierCode;
      if (!code) return;

      switch (tab.name) {
        case 'dataStream':
          if (this.purchaseDataStreamList.length > 0 && this.currentSupplierCode === code) return;
          getPayableDataStream({ supplierCode: code }).then(res => {
            // 按照 orderDate 倒序排序
            this.purchaseDataStreamList = (res.data || []).sort((a, b) => {
               return new Date(b.orderDate) - new Date(a.orderDate);
             });
          });
          break;
      }
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 20px;
}
.highlight-text {
  font-weight: bold;
  color: #409EFF;
  background-color: #ecf5ff;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
}
</style>

